<template>
  <h2>出库单列表</h2>
  <!-- table -->
  <el-table :data="outStoreList" style="width: 100%">
    <el-table-column  prop="storeName" label="仓库名称"/>
    <el-table-column prop="itemName" label="商品名称" />
    <el-table-column prop="outNum" label="出库数量" />
    <el-table-column prop="createBy" label="出库人"  />
    <el-table-column prop="createTime" label="采购时间"  width="200px"/>
    <el-table-column prop="isOut" label="状态" >
      <template #default="scope">
        <span v-if="scope.row.isOut==0" style="color:green">未确认</span>
        <span v-else style="color:red">已确认</span>
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" width="240">
      <template #default="scope">
        <el-button link type="primary" size="small" v-if="scope.row.isOut==0"
                   @click="confirmIsOut(scope.row.outsId)">确认出库</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
      small
      background
      :page-size="3"
      :pager-count="10"
      layout="prev, pager, next"
      :total="total"
      class="mt-4" @current-change="handlerOutStorePageChange"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import { request } from '../utils/request'
import {ElMessage} from "element-plus";
//声明出库单集合
const outStoreList=ref([]);
const total=ref(0);
//定义汉法发生分页查询的请求
function queryItmOutServiceList(pageNum){
  request({ url: `http://localhost:8081/outStoreList?pageNum=${pageNum}`, method: 'get' })
      .then((response)=>{
        outStoreList.value=response.data.outStoreList;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
      })
}
//加载调用函数
onMounted(function(){
  queryItmOutServiceList(1);
})
//定义分页按钮的回调函数
function handlerOutStorePageChange(pageNum){
  queryItmOutServiceList(pageNum);
}
//定义函数发生入库单确认请求
function confirmIsOut(id){
  request({ url: `http://localhost:8081/updateOutStore?id=${id}`, method: 'get' })
      .then((response)=>{
        if(response.data.code==200){
          queryItmOutServiceList(1); //刷新列表
        }
        ElMessage(response.data.msg);
      })
      .catch((err)=>{
        console.log(err);
      })
}
</script>

<style scoped>

</style>